<!doctype html>
<%@ page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
	<meta charset="UTF-8">
	<title>Grima Portal</title>
	<link rel="stylesheet" type="text/css" href="../css/themes/bootstrap/easyui.css">
	<link rel="stylesheet" type="text/css" href="../css/icon.css">
	<link rel="stylesheet" type="text/css" href="../css/portal.css">
	<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">
	
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
	
    <div data-options="region:'north',border:false" style="height:50px;padding:10px;overflow: hidden;">
		<jsp:include page="header.jsp" />
	</div>
    <div data-options="region:'east',split:true,collapsed:true,title:' '" style="width:100px;padding:10px;"></div>
	<div data-options="region:'south',border:false" style="height:30px;padding:10px;background:#F5F5F5;text-align:center;color:#707070">
		<jsp:include page="footer.jsp" />
	</div>
    <div data-options="region:'center',title:'Processos'">

    <c:if test="${not empty processes}">
    
	<table id="dg" class="easyui-datagrid" title=""
			data-options="rownumbers:true,singleSelect:true,toolbar:'#tb',fitColumns:true,onClickRow: onClickRow">
		<thead>
			<tr>
				<th data-options="field:'key',width:50">ID</th>
				<th data-options="field:'name',width:50">Nome</th>
				<th data-options="field:'version',width:30,align:'left'">Versão</th>
				<th data-options="field:'description',width:220">Descrição</th>
			</tr>
		</thead>
		<c:forEach items="${processes}" var="process">
		<tr>
			<td>${process.key}</td>                    
			<td>${process.name}</td>
			<td>${process.version}</td>
			<td>${process.description}</td>
		</tr>
		</c:forEach>
	</table>
	
    </c:if>
    <c:if test="${empty processes}">
    	Não há processos cadastrados.
    </c:if>

	
	<div id="tb" style="padding:5px;height:auto">
		<div style="margin-bottom:5px">
			<a href="#" title="Detalhes" onclick="details();"><i class="fa fa-list" style="font-size:18px;color:green;padding:5px;"></i>Detalhes</a>
			<a href="#" title="Executar" onclick="execute();"><i class="fa fa-play" style="font-size:18px;color:green;padding:5px;"></i>Iniciar</a>
			</div>
		<br/>
		<div>
			Nome: <input class="textbox" style="width:200px">
			<a href="#" class="easyui-linkbutton" iconCls="icon-search">Pesquisar</a>
		</div>
	</div>
    </div>

<input type="hidden" id="selectedItemId"/>

	<script>
		function search(){
		}
		
		function onClickRow(index){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$('#selectedItemId').val(row.key);
			}
		}
		function details(){
			var id = $('#selectedItemId').val();
			if (id){
				window.location.href = '<c:url value="/secure/processDetails.html"/>?key='+id;
			}
		}
		function execute(){
			var id = $('#selectedItemId').val();
			if (id){
				window.location.href = '<c:url value="/secure/startProcessInstance.html"/>?key='+id;
			}
		}

	</script>

</body>
</html>